<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'

const line = ref<HTMLElement>()
const tabbarItems = ref<HTMLElement[]>([])
const tabbarItem = (item: HTMLElement) => {
  tabbarItems.value.push(item)
}

const currentIndex = ref(0)
const tabbar = ref([
  {
    name: '所有订单',
  },
  {
    name: '待付款',
    count: 10,
  },
  {
    name: '待发货',
    count: 1,
  },
  {
    name: '待收货',
    count: 5,
  },
  {
    name: '待评价',
    count: 2,
  },
  {
    name: '已完成',
    count: 12,
  },
])

const orderList = ref([
  {
    orderId: '2156997110141520699',
    date: '2022-06-21',
    storeId: '1',
    store: {
      name: '沃尔玛',
      img: '/src/assets/vue.svg',
    },
    products: [
      {
        name: '罗技PowerPlay鼠标垫无线充电底座G903/GPW一代二代/G502X plus',
        specs: [
          {
            name: '颜色',
            value: '黑色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        count: 1,
        price: 100,
        img: '/src/assets/vue.svg',
      },
      {
        name: '罗技PowerPlay鼠标垫无线充电底座G903/GPW一代二代/G502X plus',
        count: 1,
        price: 100,
        specs: [
          {
            name: '颜色',
            value: '白色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        img: '/src/assets/vue.svg',
      },
    ],
    status: 1,
    amountPrice: 100,
    img: '/src/assets/vue.svg',
  },
  {
    orderId: '2156997110141520699',
    date: '2022-06-21',
    storeId: '1',
    store: {
      name: 'YourLife',
      img: '/src/assets/vue.svg',
    },
    products: [
      {
        name: '小黑子 梅树枝',
        specs: [
          {
            name: '颜色',
            value: '黑色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        count: 1,
        price: 100,
        img: '/src/assets/vue.svg',
      },
      {
        name: '罗技PowerPlay鼠标垫无线充电底座G903/GPW一代二代/G502X plus',
        count: 1,
        price: 100,
        specs: [
          {
            name: '颜色',
            value: '白色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        img: '/src/assets/vue.svg',
      },
    ],
    status: 1,
    amountPrice: 100,
    img: '/src/assets/vue.svg',
  },
])

const isAll = computed(() => {
  return orderList.value.every((item) => item.selected)
})

const selectAll = (e: any) => {
  orderList.value.forEach((item: any) => {
    item.selected = e.target.checked
  })
}

const changeTab = (index: number) => {
  if (line.value) {
    line.value.style.width = `${tabbarItems.value[index].offsetWidth / 2}px`
    line.value.style.left = `${
      tabbarItems.value[index].offsetLeft +
      tabbarItems.value[index].offsetWidth / 4
    }px`
  }
}

const initLine = () => {
  if (line.value) {
    line.value.style.width = `${tabbarItems.value[0].offsetWidth / 2}px`
    line.value.style.left = `${
      tabbarItems.value[0].offsetLeft + tabbarItems.value[0].offsetWidth / 4
    }px`
  }
}

onMounted(() => {
  initLine()
  orderList.value = orderList.value.map((item: any) => {
    item.selected = false
    return item
  })
})
</script>

<template>
  <div class="my-order-container">
    <div class="tabbar">
      <div
        :ref="tabbarItem"
        :class="['tabbar-item', currentIndex === index ? 'active' : '']"
        v-for="(item, index) in tabbar"
        :key="index"
        @click="changeTab(index)"
      >
        {{ item.name
        }}<span class="count" v-if="item.count && item.count > 0">{{
          item.count
        }}</span>
      </div>
      <div class="line" ref="line"></div>
    </div>
    <div class="order-content">
      <div class="condition-box">
        <div class="condition-search">
          <div class="search-box">
            <input
              type="text"
              placeholder="输入商品标题或订单号进行搜索"
            /><button>订单搜索</button>
          </div>
        </div>
      </div>

      <div class="orderlist-header">
        <table class="table-header">
          <tr>
            <td>宝贝</td>
            <td>单价</td>
            <td>数量</td>
            <td>商品操作</td>
            <td>实付款</td>
            <td class="order-status">
              <div class="select-box">
                <span>交易状态</span>
                <i class="iconfont icon-xiala"></i>
              </div>
              <ul class="select-options">
                <li class="option">等待付款</li>
                <li class="option">等待发货</li>
                <li class="option">商家发货</li>
                <li class="option">等待收货</li>
                <li class="option">交易完成</li>
                <li class="option">交易关闭</li>
                <li class="option">退款中的订单</li>
              </ul>
            </td>
            <td>交易操作</td>
          </tr>
        </table>
        <div class="order-remove-box">
          <div class="batch-remove">
            <div class="input-box">
              <input type="checkbox" class="select-all" :checked="isAll" @click="selectAll"/>
              <div class="remove">批量删除</div>
            </div>

          </div>
        </div>
      </div>
      <div class="order-list">
        <div class="order-item" v-for="(item, index) in orderList" :key="index">
          <div class="order-item-header">
            <div class="order-item-header-left">
              <input type="checkbox" :checked="item.selected" @click="item.selected = !item.selected">
              <span class="order-date">{{ item.date }}</span>
              <span>订单号：{{ item.orderId }}</span>
            </div>
            <div class="order-item-header-right">
              <span>{{ item.store.name }}</span>
            </div>
          </div>
          <div class="order-item-content">
            <div class="products">
              <div
                class="product-item"
                v-for="(product, index) in item.products"
                :key="index"
              >
                <div class="product-basic-info">
                  <div class="product-img">
                    <img :src="product.img" alt="" />
                  </div>
                  <div class="product-name-specs">
                    <div class="product-name">
                      <span>{{ product.name }}</span>
                    </div>
                    <div class="product-specs">
                      <div
                        class="product-spec-item"
                        v-for="(spec, index) in product.specs"
                        :key="index"
                      >
                        {{ spec.name }}：{{ spec.value }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="product-price">
                  <span class="origin-price has-discount">￥120</span>
                  <span class="discount-price">￥{{ product.price }}</span>
                </div>
                <div class="product-quantity">
                  <span>{{ product.count }}</span>
                </div>
                <div class="product-operation">
                  <span>申请售后</span>
                  <span>投诉商家</span>
                </div>
              </div>
            </div>
            <div class="product-item-other">
              <div class="product-amount-price">
                <div class="product-count">
                  <span
                    >共<strong
                      style="color: #f40; margin: 0 4px; font-weight: bold"
                      >{{ item.products.length }}</strong
                    >件商品</span
                  >
                </div>
                <div class="amount-price">
                  <span>合计：</span>
                  <span class="price" style="color: #f40; font-weight: bold"
                    >￥{{ item.amountPrice }}</span
                  >
                </div>
              </div>
              <div class="product-status">
                <span>交易成功</span>
              </div>
              <div class="operations">
                <span class="comment">评价</span>
                <span class="delete">删除订单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.my-order-container {
  .tabbar {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    background-color: #fff;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
    .tabbar-item {
      // flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 20px;
      text-align: center;
      line-height: 28px;
      font-size: 16px;
      color: #666;
      cursor: pointer;
      box-sizing: border-box;
      border-bottom: 2px solid transparent;
      .count {
        display: inline-block;
        font-size: 12px;
        color: #ff5000;
        margin-left: 5px;
      }
    }
    .line {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      background-color: #ff5000;
      transition: all 0.3s;
    }
  }
  .order-content {
    width: 100%;
    .table-header {
      width: 100%;
      font-size: 14px;
      color: #666;
      margin-top: 20px;
      text-align: center;
      border: 1px solid #e9e9e9;
      tr {
        width: 100%;
        background-color: #f5f5f5;
      }
      td:nth-child(1) {
        width: 36%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(2) {
        width: 10%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(3) {
        width: 7%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(4) {
        width: 12%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(5) {
        width: 12%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(6) {
        width: 12%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      td:nth-child(7) {
        width: 11%;
        height: 29px;
        line-height: 29px;
        padding: 5px 0;
      }
      .order-status {
        cursor: pointer;
        position: relative;
        &:hover .select-options {
          display: block;
        }
        .select-options {
          display: none;
          position: absolute;
          top: 100%;
          width: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 5px;
          background-color: #fff;
          box-shadow: @shadow-color;
          overflow: hidden;
          padding: 5px;
        }
        .option {
          border-radius: 5px;
          &:hover {
            color: #fff;
            background-color: rgb(74, 185, 229);
          }
        }
      }
    }
    .condition-box {
      width: 100%;
      margin-top: 20px;
      .search-box {
        width: 100%;
        height: 35px;
        input {
          width: 300px;
          max-width: 300px;
          margin: 0;
          height: 100%;
          outline: none;
          padding: 4px 10px;
          border: 1px solid #e9e9e9;
          box-sizing: border-box;
          margin-right: 5px;
        }

        button {
          margin: 0;
          height: 100%;
          padding: 4px 10px;
          background-color: #fff;
          border: 1px solid #e9e9e9;
          // border-radius: 5px;
          box-sizing: border-box;
          outline: none;
          cursor: pointer;
        }
      }
    }
  }
}

.order-remove-box {
  margin-top: 10px;
  height: 30px;
  .batch-remove {
    height: 100%;
  }
  .input-box {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .select-all {
    margin: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    outline: none;
    border: none;
  }
  .remove {
    width: 100px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #e9e9e9;
  }
}

.order-list {
  width: 100%;
  margin-top: 20px;
  .order-item {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20px;
    border: 1px solid #e9e9e9;
    .order-item-header {
      display: flex;
      width: 100%;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      background-color: #f5f5f5;
      border-bottom: 1px solid #e9e9e9;
      input {
        outline: none;
        margin: 0;
        margin-right: 10px;
      }
    }
    .order-item-header-left {
      width: 50%;
      font-size: 14px;
      color: #333;
      display: flex;
      .order-date {
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .order-item-header-right {
      width: 50%;
      font-size: 14px;
      color: #333;
    }

    .order-item-content {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      .products {
        width: 65%;
        box-sizing: border-box;
      }
      .product-item {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        &:not(:last-child) {
          border-bottom: 1px solid #e9e9e9;
        }
      }
      .product-basic-info {
        width: 55%;
        display: flex;
        font-size: 14px;
        box-sizing: border-box;
        padding: 20px;
      }
      .product-img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: #ff5000;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .product-name-specs {
        flex: 1;
        width: 20%;
        .product-name {
          margin-bottom: 10px;
          line-height: 18px;
        }
        .product-spec-item {
          color: #c9c9c9;
          font-size: 12px;
          &:not(:last-child) {
            margin-bottom: 5px;
          }
        }
      }
      .origin-price,
      .discount-price {
        display: block;
        text-align: center;
      }
      .product-price {
        width: 15.5%;
        box-sizing: border-box;
        padding: 20px 0;
      }
      .product-quantity {
        width: 10.5%;
        padding: 20px 0;
        box-sizing: border-box;
        text-align: center;
      }
      .product-operation {
        width: 19%;
        padding: 20px 0;
        span {
          display: block;
          text-align: center;
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
      }
      .product-item-other {
        display: flex;
        width: 35%;
        border: 1px solid #e9e9e9;
        .product-amount-price,
        .product-status {
          padding: 20px 0;
          width: 34%;
          box-sizing: border-box;
          text-align: center;
          border-right: 1px solid #e9e9e9;
        }
        .product-count {
          margin-bottom: 10px;
        }
        .operations {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 20px 0;
          box-sizing: border-box;
          & span:not(:last-child) {
            margin-bottom: 10px;
          }
        }
        .comment,
        .delete {
          display: inline-block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #e9e9e9;
          cursor: pointer;
        }
      }
    }
  }
}

.product-price span:not(:last-child) {
  margin-bottom: 10px;
}
.product-price span.has-discount {
  text-decoration: line-through;
  color: #d9d9d9;
}
</style>
